<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!--Favicons-->
    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
    
    <meta name="msapplication-TileColor" content="#ffffff">

    <meta name="theme-color" content="#ffffff">
    
    <!--Bootstrap and Other Vendors-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/fontawesome-all.min.css">
    <link rel="stylesheet" href="vendors/owl.carousel/css/owl.carousel.css">    
    <link rel="stylesheet" href="vendors/bootstrap-select/css/bootstrap-select.min.css">
     
    <link rel="stylesheet" type="text/css" href="vendors/flexslider/flexslider.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="vendors/bootstrap-rating/bootstrap-rating.css" media="screen" />
    
    <!--Fonts-->
    <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">  
    
    <!--Mechanic Styles-->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/big.css">
    <link rel="stylesheet" href="css/responsive.css">
    
    <!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<a href="#" id="back-to-top" title="Back to top">&uarr;</a>
    
    <header class="row" id="header">
        <div class="row m0 logo_line">
            <div class="container">
               <div class="row">
                  <div class="col-sm-5 logo">
                     <a href="Home.jsp" class="logo_a"><img src="images/logo_2020.png" alt="D-shine">
                     </a>
                  </div>
                  <div class="col-sm-7 searchSec">
                     <div class="col-sm-12">
                        <div class="fright wishlistCompare">
                           <ul class="nav">
                              <li>
                                 <a href="wode.jsp">
                                 <span class="wish">
                                 <i class="fas fa-heart"></i>
                          
                                 </span>
                                 <span>我的</span>
                                 </a>
                              </li>
                              <li class="h_cart">
                                 <a href="denglu.jsp">
                                 <span class="wish">
                                 <i class="fas fa-gem"></i>
                            
                                 </span>
                                 <span>登录</span>
                                 </a>
                                 <div class="hclist">
                                    <div class="table-responsive">
                                       <table class="table">
                                          <thead>
                                             <tr>
                                                <th class="productImage">Product image</th>
                                                <th class="productName">Product name</th>
                                                <th></th>
                                             </tr>
                                          </thead>
                                          <tbody>
                                             <tr class="alert" role="alert">
                                                <td class="productImage"><img src="images/product/single/l1.png" alt=""></td>
                                                <td class="productName">
                                                   <h6 class="heading">Gold Plated Charm</h6>
                                                   <div class="input-group spinner">
                                                      <input class="form-control" value="1" type="text">
                                                      <div class="input-group-btn-vertical">
                                                         <button class="btn btn-default"><i class="fas fa-angle-up"></i></button>
                                                         <button class="btn btn-default"><i class="fas fa-angle-down"></i></button>
                                                      </div>
                                                   </div>
                                                </td>
                                                <td><a href="#" class="edit" data-dismiss="alert" aria-label="Close"><i class="far fa-trash-alt"></i></a></td>
                                             </tr>
                                             <tr class="alert" role="alert">
                                                <td class="productImage"><img src="images/product/single/l1.png" alt=""></td>
                                                <td class="productName">
                                                   <h6 class="heading">Zephyrr Stones</h6>
                                                   <div class="input-group spinner">
                                                      <input class="form-control" value="1" type="text">
                                                      <div class="input-group-btn-vertical">
                                                         <button class="btn btn-default"><i class="fas fa-angle-up"></i></button>
                                                         <button class="btn btn-default"><i class="fas fa-angle-down"></i></button>
                                                      </div>
                                                   </div>
                                                </td>
                                                <td><a href="#" class="edit" data-dismiss="alert" aria-label="Close"><i class="far fa-trash-alt"></i></a></td>
                                             </tr>
                                          </tbody>
                                       </table>
                                    </div>
                                 </div>
                              </li>
                           </ul>
                        </div>
                     </div>
                     <div class="col-sm-12">
                        <div class="fright searchForm">
                           <form action="#" method="get">
                              <div class="input-group">
                                 <input type="hidden" name="search_param" value="all" id="search_param">
                                 <input type="search" class="form-control" placeholder="输入身份证，查看真爱承诺">
                                 <span class="input-group-btn searchIco">
                                 <button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
                                 </span>
                              </div>
                              <!-- /input-group -->
                           </form>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <nav class="navbar navbar-default m0 navbar-static-top">
            <div class="container-fluid container">
               <!-- Brand and toggle get grouped for better mobile display -->
               <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNav">
                  <i class="fas fa-bars"></i> MENU
                  </button>
               </div>
               <!-- Collect the nav links, forms, and other content for toggling -->
               <div class="collapse navbar-collapse" id="mainNav">
                  <ul class="nav navbar-nav">
                     <li class="active dropdown">
                        <a class="dropdown-toggle pinpai" data-toggle="dropdown" role="button" aria-expanded="false">品牌故事</a>
                        <ul class="dropdown-menu" role="menu">
                           <li class="active"><a href="index.html">Home Default</a></li>
                           <li><a href="index2.html">Home 2 - Menu 2</a></li>
                           <li><a href="index3.html">Home 3 - Menu 3</a></li>
                        </ul>
                     </li>
                     <li><a href="qiuhun.jsp">求婚钻戒</a></li>
                     <li class="dropdown">
                        <a class="dropdown-toggle liwu" data-toggle="dropdown" role="button" aria-expanded="false">结婚对戒</a>
                        <ul class="dropdown-menu" role="menu">
                           <li><a href="blog.html">Blog</a></li>
                           <li><a href="single-post.html">Single Post</a></li>
                           <li><a href="shortcodes.html">Shortcodes</a></li>
                           <li><a href="innerpage-dark.html">Inner Page Dark</a></li>
                           <li><a href="404.html">404</a></li>
                        </ul>
                     </li>
                     <li class="dropdown megaMenu">
                        <a class="dropdown-toggle duijie" data-toggle="dropdown" role="button" aria-expanded="false">真爱礼物</a>
                        <ul class="dropdown-menu row m0" role="menu">
                           <li class="listMenu">
                              <div class="row listTitle">Jewelery &amp; sectionals</div>
                              <ul class="nav megaInnerMenu">
                                 <li><a href="#">wedding ring</a></li>
                                 <li><a href="#">pendant</a></li>
                                 <li><a href="#">nosering</a></li>
                                 <li><a href="#">necklace</a></li>
                                 <li><a href="#">medallion</a></li>
                                 <li><a href="#">engagement ring</a></li>
                                 <li><a href="#">costume jewellery</a></li>
                                 <li><a href="#">brooch</a></li>
                                 <li><a href="#">signet ring</a></li>
                              </ul>
                           </li>
                           <li class="listMenu">
                              <div class="row listTitle">shop by collections</div>
                              <ul class="nav megaInnerMenu">
                                 <li><a href="#">Ring</a></li>
                                 <li><a href="#">Bracelet</a></li>
                                 <li><a href="#">Bangle</a></li>
                                 <li><a href="#">Link, Chain</a></li>
                                 <li><a href="#">Stud</a></li>
                                 <li><a href="#">Ear-Ring, Tops</a></li>
                                 <li><a href="#">Brooch</a></li>
                              </ul>
                           </li>
                           <li class="boxMenu">
                              <div class="row listTitle">
                                 shop by categories <a href="product.html">shop all <i class="fas fa-caret-right"></i></a>
                              </div>
                              <ul class="nav megaInnerMenu row m0">
                                 <li>
                                    <a href="product2.html">
                                       <div class="row m0 imgHov">
                                          <img src="images/menu/1.png" alt="">
                                          <div class="row m0 hovCnt">
                                             <div class="row m0 hovCntInner">
                                                shop now <i class="fas fa-caret-right"></i>
                                             </div>
                                          </div>
                                       </div>
                                       <div class="row m0 menuTitle">Earrings</div>
                                    </a>
                                 </li>
                                 <li>
                                    <a href="product.html">
                                       <div class="row m0 imgHov">
                                          <img src="images/menu/2.png" alt="">
                                          <div class="row m0 hovCnt">
                                             <div class="row m0 hovCntInner">
                                                shop now <i class="fas fa-caret-right"></i>
                                             </div>
                                          </div>
                                       </div>
                                       <div class="row m0 menuTitle">Brooch</div>
                                    </a>
                                 </li>
                                 <li>
                                    <a href="product2.html">
                                       <div class="row m0 imgHov">
                                          <img src="images/menu/3.png" alt="">
                                          <div class="row m0 hovCnt">
                                             <div class="row m0 hovCntInner">
                                                shop now <i class="fas fa-caret-right"></i>
                                             </div>
                                          </div>
                                       </div>
                                       <div class="row m0 menuTitle">Necklace</div>
                                    </a>
                                 </li>
                              </ul>
                           </li>
                        </ul>
                     </li>
                     <li class="dropdown">
                        <a class="dropdown-toggle tiyan" data-toggle="dropdown" role="button" aria-expanded="false">真爱体验店</a>
                        <ul class="dropdown-menu" role="menu">
                           <li><a href="product.html">Products</a></li>
                           <li><a href="product2.html">Products 2</a></li>
                           <li><a href="single-product.html">Single Product</a></li>
                           <li><a href="catalog.html">Catalog</a></li>
                           <li><a href="cart.html">Cart</a></li>
                           <li><a href="checkout.html">Checkout</a></li>
                        </ul>
                     </li>
                     <li><a href="#">DR真爱婚礼</a></li>
                     <li><form action="#" id="theshy" method="get">
                              <div class="input-group1">
                                 <input type="hidden" name="search_param" value="all" id="search_param">
                                 <input type="search" class="form-control" placeholder="请输入商品名称">
                                 <span class="input-group-btn  Ico">
                                 <button id="but"  type="submit"><img src="images/sousuo.png" ></img></button>
                                
                                
                                 </span>
                              </div>
                              <!-- /input-group -->
                           </form></li>
                     
                     <li class="offers_navbtn" ><a href="#"><i class="fas fa-gift"></i>Surprise</a></li>
                  </ul>
               </div>
               <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
         </nav>
    </header> <!--Header-->
    
    <section id="breadcrumbRow" class="row">
        <h2>single product</h2>
        <div class="row pageTitle m0">
            <div class="container">
                <h4 class="fleft">single product</h4>
                <ul class="breadcrumb fright">
                    <li><a href="index.html">home</a></li>
                    <li class="active">single product</li>
                </ul>
            </div>
        </div>
    </section>
    
    <section class="row contentRowPad">
        <div class="container">
            <div class="row singleProduct">
                <div class="col-sm-7">
                    <div class="row m0 flexslider" id="productImageSlider">
                        <ul class="slides">
                            <li>
                            <canvas id="canvas" width="600" height="500">
							
                            <img src="images/product/single/1.jpg" alt=""style="display: none" id="img"></li>
                            </canvas>
                            <li>
                            <canvas id="canvas2" width="1000" height="500">
                            <img src="images/product/single/2.jpg" alt=""style="display: none" id="imge">
                              </canvas>
                            </li>
                            
                            
                        </ul>
                    </div>
                    <div class="row m0 flexslider" id="productImageSliderNav">
                        <ul class="slides">
                            <li>
                            
                            <img class="img-thumbnail" src="images/product/single/1s.jpg" alt=""></li>
                            <li>
                            <img class="img-thumbnail" src="images/product/single/2s.jpg" alt=""></li>
                             
                            
                        </ul>
                    </div>
                </div>
                <div class="col-sm-5">
                    <div class="row m0">
                        <h4 class="heading">Precious Jewels Ring</h4>
                        <h3 class="heading price"><del>$580</del>$420</h3>
                        <div class="row m0 starsRow">
                            <div class="stars fleft">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-empty"></i>
                            </div>
                            <div class="fleft">
                                5 Review(s) <span>|</span> <a href="#">Add Your Review</a>
                            </div>
                        </div>
                        <div class="row descList m0">
                            <dl class="dl-horizontal">
                                <dt>manufacturer :</dt>
                                <dd>Tartaan & Co</dd>
                                <dt>availability :</dt>
                                <dd>In Stock 20 Item(s)</dd>
                                <dt>product code :</dt>
                                <dd>Xuo15</dd>
                            </dl>
                        </div>
                        <div class="row m0 shortDesc">
                            <p class="m0">Rustic, natural, often made of bark-covered logs or simple planks. Look for junk shop finds when in the country (for authenticity), or purchase hand-made new versions.<br>
                            Rustic, natural, often made of bark-covered logs or simple planks. Look for junk shop finds when in the country (for authenticity), or purchase hand-made new versions. when in the country (for authenticity), or purchase hand-made </p>
                        </div>
                        <div class="row m0">
                            <h5 class="heading proAttr">Size :</h5>
                            <select class="selectpicker sizeSelect">
                                <option value="queen">queen</option>
                                <option value="red">red</option>
                                <option value="black">black</option>
                                <option value="white">white</option>
                            </select>
                        </div>
                        <div class="row m0">
                            <ul class="list-inline wce">
                                <li><a href="#"><i class="far fa-heart"></i>Add to Wishlist</a></li>
                                <li><a href="#"><i class="fas fa-shopping-cart-alt"></i>Add to Compare</a></li>
                                <li><a href="#"><i class="fas fa-envelope"></i>Email to a Friend</a></li>
                            </ul>
                        </div>
                        <div class="row m0 qtyAtc">
                            <div class="fleft quantity">
                                <div class="fleft">Qty <span>=</span></div>
                                <div class="input-group spinner">
                                    <input type="text" class="form-control" value="2">
                                    <div class="input-group-btn-vertical">
                                        <button class="btn btn-default"><i class="fas fa-angle-up"></i></button>
                                        <button class="btn btn-default"><i class="fas fa-angle-down"></i></button>
                                    </div>
                                </div>
                            </div>
                            <form name=alipayment action=alipay.trade.page.pay.jsp method=post target="_blank">
        					<div id="body1" class="show" name="divcontent">
            				<input value="4567583537" type="hidden" id="WIDout_trade_no" name="WIDout_trade_no" />
           					 <input value="戒指" type="hidden" id="WIDsubject" name="WIDsubject" />
           					 <input value="5600"  type="hidden" id="WIDtotal_amount" name="WIDtotal_amount" />
           					 <input id="WIDbody" type="hidden" name="WIDbody" />
            

        					</div>
       						 <button type="submit" class="fleft btn btn-default"><img src="images/icons/cart3.png" alt=""> add to cart</button>
    						</form>
                            
                        </div>
                    </div>
                </div>
            </div>
            <div class="row m0 tabRow">
                <ul class="nav nav-tabs" role="tablist" id="shortcodeTab">
                    <li role="presentation" class="active"><a href="#description" aria-controls="description" role="tab" data-toggle="tab">
                        <i class="fas fa-align-left"></i> description
                    </a></li>
                    <li role="presentation"><a href="#review" aria-controls="review" role="tab" data-toggle="tab">
                        <i class="fas fa-thumbs-up"></i> review (1)
                    </a></li>
                    <li role="presentation"><a href="#additionInfo" aria-controls="additionInfo" role="tab" data-toggle="tab">
                        <i class="fas fa-file-text"></i> Additional Information
                    </a></li>
                </ul>
                <div class="tab-content shortcodeTabContent">
                    <div role="tabpanel" class="tab-pane row m0 active" id="description">
                        <div class="fleft img"><img class="img-responsive" src="images/product/10.png" alt=""></div>
                        <div class="fleft desc">
                            <h5 class="heading">Product Details</h5>
                            <p>Dining furniture designs are plain in appearance, stripped to bare essentials (few turnings, no decorations), featuring natural materials; no ornamentation; strong emphasis on function.Dining furniture designs are plain in appearance, stripped to bare essentials (few turnings, no decorations), featuring natural materials; no ornamentation; strong emphasis on function.</p>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane row m0" id="review">
                        <div class="row m0 reviewCount">1 review for this product</div>
                        <div class="row m0 reviewBody">
                            <span class="bold">4</span> out of 5 <br>
                            <span class="bold">K Admas</span> - March 10, 2020
                            <p class="m0">Amazing Product!</p>
                        </div>
                        <div class="row m0 reviewAdd">
                            <h4 class="heading">Add a review</h4>
                            <form action="#" role="form" method="post" class="row m0 reviewForm">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" placeholder="Your Name *" required>
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="email" class="form-control" placeholder="Your Email *" required>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <input type="url" class="form-control" placeholder="Your Website">
                                    </div>
                                    <div class="col-sm-6 ratingStars">
                                        Your Rating <input type="hidden" class="rating" data-fractions="2">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <h4 class="heading">Your Review</h4>
                                        <textarea name="reviewText" id="reviewText" class="form-control reviewText"></textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <input type="submit" class="btn btn-primary filled">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane row m0" id="additionInfo">
                                 <div class="row m0 additionInfoRow">
                                    <div class="fleft infoTitle">Material</div>
                                    <div class="fleft infos">Gold</div>
                                </div>
                                <div class="row m0 additionInfoRow">
                                    <div class="fleft infoTitle">Stone </div>
                                    <div class="fleft infos">Diamond</div>
                                </div>
                                 <div class="row m0 additionInfoRow">
                                    <div class="fleft infoTitle">Resizable?  </div>
                                    <div class="fleft infos">No</div>
                                </div>
                                <div class="row m0 additionInfoRow">
                                    <div class="fleft infoTitle">Item Height </div>
                                    <div class="fleft infos">4.3 Millimeters </div>
                                </div>
                                <div class="row m0 additionInfoRow">
                                    <div class="fleft infoTitle">Item Width</div>
                                    <div class="fleft infos">2.5 Millimeters </div>
                                </div>
                                <div class="row m0 additionInfoRow">
                                    <div class="fleft infoTitle">Item Width</div>
                                    <div class="fleft infos">2.5 Millimeters </div>
                                </div>
                                 <div class="row m0 additionInfoRow">
                                    <div class="fleft infoTitle">Ring Size</div>
                                    <div class="fleft infos">7</div>
                                </div> 
                    </div>
                </div>
            </div> <!--Tabs Row-->
            <div class="row shortcodesRow m0">
                <div class="row sectionTitle">
                    <h3>latest products</h3>
                    <h5>know more about our latest collection</h5>
                </div>
                <div class="col-sm-3 product">
                    <div class="productInner row m0">
                        <div class="row m0 imgHov">
                            <img src="images/product/pro1p/1.png" alt="">
                            <div class="row m0 hovArea">
                                <div class="row m0 icons">
                                    <ul class="list-inline">
                                        <li><a href="#"><i class="fas fa-heart"></i></a></li>
                                        <li><a href="#"><i class="fas fa-shopping-cart-alt"></i></a></li>
                                        <li><a href="#"><i class="fas fa-expand"></i></a></li>
                                    </ul>                                    
                                </div>
                                <div class="row m0 proType"><a href="#">Baccarat</a></div>
                                <div class="row m0 proRating">
                                    <i class="fas fa-star-o"></i>
                                    <i class="fas fa-star-o"></i>
                                    <i class="fas fa-star-o"></i>
                                    <i class="fas fa-star-o"></i>
                                    <i class="fas fa-star-o"></i>
                                </div>
                                <div class="row m0 proPrice"><i class="fas fa-usd"></i>455.00</div>
                            </div>
                        </div>
                        <div class="row m0 proName"><a href="single-product.html">colorful sofa</a></div>
                        <div class="row m0 proBuyBtn">
                            <button class="addToCart btn">add to cart</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3 product">
                    <div class="productInner row m0">
                        <div class="row m0 imgHov">
                            <img src="images/product/pro1p/2.png" alt="">
                            <div class="row m0 hovArea">
                                <div class="row m0 icons">
                                    <ul class="list-inline">
                                        <li><a href="#"><i class="fas fa-heart"></i></a></li>
                                        <li><a href="#"><i class="fas fa-shopping-cart-alt"></i></a></li>
                                        <li><a href="#"><i class="fas fa-expand"></i></a></li>
                                    </ul>                                    
                                </div>
                                <div class="row m0 proType"><a href="#">Baccarat</a></div>
                                <div class="row m0 proRating">
                                    <i class="fas fa-star-o"></i>
                                    <i class="fas fa-star-o"></i>
                                    <i class="fas fa-star-o"></i>
                                    <i class="fas fa-star-o"></i>
                                    <i class="fas fa-star-o"></i>
                                </div>
                                <div class="row m0 proPrice"><i class="fas fa-usd"></i>455.00</div>
                            </div>
                        </div>
                        <div class="row m0 proName"><a href="single-product.html">colorful sofa</a></div>
                        <div class="row m0 proBuyBtn">
                            <button class="addToCart btn">add to cart</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3 product">
                    <div class="productInner row m0">
                        <div class="row m0 imgHov">
                            <img src="images/product/pro1p/3.png" alt="">
                            <div class="row m0 hovArea">
                                <div class="row m0 icons">
                                    <ul class="list-inline">
                                        <li><a href="#"><i class="fas fa-heart"></i></a></li>
                                        <li><a href="#"><i class="fas fa-shopping-cart-alt"></i></a></li>
                                        <li><a href="#"><i class="fas fa-expand"></i></a></li>
                                    </ul>                                    
                                </div>
                                <div class="row m0 proType"><a href="#">Baccarat</a></div>
                                <div class="row m0 proRating">
                                    <i class="fas fa-star-o"></i>
                                    <i class="fas fa-star-o"></i>
                                    <i class="fas fa-star-o"></i>
                                    <i class="fas fa-star-o"></i>
                                    <i class="fas fa-star-o"></i>
                                </div>
                                <div class="row m0 proPrice"><i class="fas fa-usd"></i>455.00</div>
                            </div>
                        </div>
                        <div class="row m0 proName"><a href="single-product.html">colorful sofa</a></div>
                        <div class="row m0 proBuyBtn">
                            <button class="addToCart btn">add to cart</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3 product">
                    <div class="productInner row m0">
                        <div class="row m0 imgHov">
                            <img src="images/product/pro1p/4.png" alt="">
                            <div class="row m0 hovArea">
                                <div class="row m0 icons">
                                    <ul class="list-inline">
                                        <li><a href="#"><i class="fas fa-heart"></i></a></li>
                                        <li><a href="#"><i class="fas fa-shopping-cart-alt"></i></a></li>
                                        <li><a href="#"><i class="fas fa-expand"></i></a></li>
                                    </ul>                                    
                                </div>
                                <div class="row m0 proType"><a href="#">Baccarat</a></div>
                                <div class="row m0 proRating">
                                    <i class="fas fa-star-o"></i>
                                    <i class="fas fa-star-o"></i>
                                    <i class="fas fa-star-o"></i>
                                    <i class="fas fa-star-o"></i>
                                    <i class="fas fa-star-o"></i>
                                </div>
                                <div class="row m0 proPrice"><i class="fas fa-usd"></i>455.00</div>
                            </div>
                        </div>
                        <div class="row m0 proName"><a href="single-product.html">colorful sofa</a></div>
                        <div class="row m0 proBuyBtn">
                            <button class="addToCart btn">add to cart</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <footer class="row">
        <div class="row m0 topFooter">
            <div class="container line1">
                <div class="row footFeatures">
                    <div class="col-sm-4 footFeature">
                        <div class="media">
                            <div class="media-left icon"><img src="images/icons/car3.png" alt=""></div>
                            <div class="media-body texts">
                                <h4>free shipping</h4>
                                <h2>International</h2>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4 footFeature">
                        <div class="media m0">
                            <div class="media-left icon"><img src="images/icons/tel24-7_2.png" alt=""></div>
                            <div class="media-body texts">
                                <h4>24 hours helpline</h4>
                                <h2>XXX</h2>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4 footFeature">
                        <div class="media m0">
                            <div class="media-left icon"><img src="images/icons/shopping-bag2.png" alt=""></div>
                            <div class="media-body texts">
                                <h4>see our</h4>
                                <h2>latest offers</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container line2">
                <div class="row">
                    <div class="col-sm-3 widget">
                        <div class="row m0">
                            <h4>About Dshine</h4>
                            <p>We provide the best Quality of products to you.We are always here to help our lovely customers.</p>
                            <ul class="list-inline">
                                <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
                                <li><a href="#"><i class="fab fa-dribbble"></i></a></li>
                                <li><a href="#"><i class="fab fa-google-plus"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-sm-3 widget">
                        <div class="row m0">
                            <h4>information</h4>
                            <ul class="nav">
                                <li><a href="about.html">About Us</a></li>
                                
                                <li><a href="blog.html">Blog</a></li>
                                <li><a href="#">Careers</a></li>
                                <li><a href="#">Top Brands</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-sm-3 widget">
                        <div class="row m0">
                            <h4>top brands</h4>
                            <ul class="nav">
                                <li><a href="#">Fusce iaculis</a></li>
	                            <li><a href="#">Nisl dapibus</a></li>
	                            <li><a href="#">Vulputate sapien</a></li>
	                            <li><a href="#">Aliquet</a></li>
	                            <li><a href="#">Risus feugiat</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-sm-3 widget">
                        <div class="row m0">
                            <h4>subscribe to our latest news</h4>
                            <form action="subscriptionList.php" method="post" role="form">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fas fa-envelope"></i></span>
                                    <input type="email" class="form-control" id="subscribeEmail" name="subscribeEmail" placeholder="EMAIL ADDRESS">
                                </div>
                                <input type="submit" class="form-control" value="Subscribe" id="submit" name="submit">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row m0 copyRight">
            <div class="container">
                <div class="row">
                    <div class="fleft">Copyright &copy; 2020.Company name All rights reserved.</div>
                    <ul class="nav nav-pills fright">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about.html">about</a></li>
                        <li><a href="blog.html">blog</a></li>
                        <li><a href="contact.html">contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
  </body>
  <!--jQuery, Bootstrap and other vendor JS-->
    
    <!--jQuery-->
    <script src="js/jquery-2.1.3.min.js"></script>

    <!--Google Maps-->
    <script src="http://ditu.google.cn/maps/api/js"></script>
    
    <!--Bootstrap JS-->
    <script src="js/bootstrap.min.js"></script>
    
     
         
    <!--Owl Carousel-->
    <script src="vendors/owl.carousel/js/owl.carousel.min.js"></script>
    
    <!--Isotope-->
    <script src="vendors/isotope/isotope-custom.js"></script>
    
    <!--FlexSlider-->
    <script src="vendors/flexslider/jquery.flexslider-min.js"></script>
    
    <!--D-shine JS-->
    <script src="js/d-shine.js"></script>
    
    <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var h1 = 1;
	var h2 = 800;
	var ss = $(document).scrollTop();
	$(window).scroll(function(){
		var s = $(document).scrollTop();

		if(s< h1){
			$('#header').removeClass('yya');
		}if(s > h1){
			$('#header').addClass('yya');
		}if(s > h2){
			$('#header').addClass('gizle');
			if(s > ss){
				$('#header').removeClass('sabit');
			}else{
				$('#header').addClass('sabit');
			}
			ss = s;
		}


	});
	
});
</script>

<!--jQuery, Bootstrap and other vendor JS-->
      <!--jQuery-->
      <script src="js/jquery-2.1.3.min.js"></script>
      <!--Google Maps-->
      <script src="http://ditu.google.cn/maps/api/js"></script>
      <!--Bootstrap JS-->
      <script src="js/bootstrap.min.js"></script>
      
      <!--Owl Carousel-->
      <script src="vendors/owl.carousel/js/owl.carousel.min.js"></script>
      <!--Isotope-->
      <script src="vendors/isotope/isotope-custom.js"></script>
      <!--FlexSlider-->
      <script src="vendors/flexslider/jquery.flexslider-min.js"></script>
      <!--D-shine JS-->
      <script src="js/d-shine.js"></script>
<script type="text/javascript">
    var canvas2 = document.getElementById("canvas2");
    var context2 = canvas2.getContext("2d");
    var imge = document.getElementById("imge");
 
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var img = document.getElementById("img");

    // 图片被放大区域的中心点，也是放大镜的中心点
    var centerPoint = {};
    // 图片被放大区域的半径
    var originalRadius = 100;
    // 图片被放大区域
    var originalRectangle = {};
    // 放大倍数
    var scale = 2;
    // 放大后区域
    var scaleGlassRectangle

    centerPoint.x = 200;
    centerPoint.y = 200;


    window.onload = function () {
        addListener();
        draw();
        draw2();

    }


    function drawBackGround() {
    	 context.drawImage(img, 0, 0);
    }
    function drawBackGround2() {
       context2.drawImage(imge, 0, 0);
   }


    function calOriginalRectangle(point) {
        originalRectangle.x = point.x - originalRadius;
        originalRectangle.y = point.y - originalRadius;
        originalRectangle.width = originalRadius * 2;
        originalRectangle.height = originalRadius * 2;
    }
    function calOriginalRectangle2(point) {
        originalRectangle.x = point.x - originalRadius;
        originalRectangle.y = point.y - originalRadius;
        originalRectangle.width = originalRadius * 2;
        originalRectangle.height = originalRadius * 2;
    }

    function drawMagnifyingGlass() {

        scaleGlassRectangle = {
            x: centerPoint.x - originalRectangle.width * scale / 2,
            y: centerPoint.y - originalRectangle.height * scale / 2,
            width: originalRectangle.width * scale,
            height: originalRectangle.height * scale

        }
        context.save();
        context.beginPath();
        context.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false);
        context.clip();		
        context.drawImage(canvas,
                originalRectangle.x, originalRectangle.y,
                originalRectangle.width, originalRectangle.height,
                scaleGlassRectangle.x, scaleGlassRectangle.y,
                scaleGlassRectangle.width, scaleGlassRectangle.height
        )
        context.restore();

        context.beginPath();
        
        var gradient = context.createRadialGradient(
                centerPoint.x, centerPoint.y, originalRadius - 5,
                centerPoint.x, centerPoint.y, originalRadius);
        gradient.addColorStop(0, 'rgba(0,0,0,0.2)');
        gradient.addColorStop(0.80, 'silver');
        gradient.addColorStop(0.90, 'silver');
        gradient.addColorStop(1.0, 'rgba(150,150,150,0.9)');
        
   

        context.strokeStyle = gradient;
        context.lineWidth = 5;
        context.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false);
        context.stroke();
    }
    function drawMagnifyingGlass2() {

        scaleGlassRectangle = {
            x: centerPoint.x - originalRectangle.width * scale / 2,
            y: centerPoint.y - originalRectangle.height * scale / 2,
            width: originalRectangle.width * scale,
            height: originalRectangle.height * scale

        }
        context2.save();
        context2.beginPath();
        context2.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false);
        context2.clip();	
 
        context2.drawImage(canvas2,
                originalRectangle.x, originalRectangle.y,
                originalRectangle.width, originalRectangle.height,
                scaleGlassRectangle.x, scaleGlassRectangle.y,
                scaleGlassRectangle.width, scaleGlassRectangle.height
        )
        context2.restore();

        context2.beginPath();
        
        var gradient2 = context2.createRadialGradient(
                centerPoint.x, centerPoint.y, originalRadius - 5,
                centerPoint.x, centerPoint.y, originalRadius);

        
        
        gradient2.addColorStop(0, 'rgba(0,0,0,0.2)');
        gradient2.addColorStop(0.80, 'silver');
        gradient2.addColorStop(0.90, 'silver');
        gradient2.addColorStop(1.0, 'rgba(150,150,150,0.9)');

 
        context2.strokeStyle = gradient2;
        context2.lineWidth = 5;
        context2.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false);
        context2.stroke();
    }
    function draw2() {
        context2.clearRect(0, 0, canvas2.width, canvas2.height);
        drawBackGround2();
        calOriginalRectangle2(centerPoint);
        drawMagnifyingGlass2();
    }

    function draw() {
    	context.clearRect(0, 0, canvas.width, canvas.height);
        drawBackGround();
        calOriginalRectangle(centerPoint);
        drawMagnifyingGlass();
    }


    function addListener() {
        canvas2.onmousemove = function (e) {
            centerPoint = windowToCanvas2(e.clientX, e.clientY);
            draw2();
        }
        canvas.onmousemove = function (e) {
            centerPoint = windowToCanvas(e.clientX, e.clientY);
            draw();
        }
    }

    function windowToCanvas2(x, y) {
        var bbox1 = canvas2.getBoundingClientRect();
        return {x: x - bbox1.left, y: y - bbox1.top}
    }
    function windowToCanvas(x, y) {
        var bbox = canvas.getBoundingClientRect();
        return {x: x - bbox.left, y: y - bbox.top}
    }



</script>
     <!--jQuery, Bootstrap and other vendor JS-->
      <!--jQuery-->
      <script src="js/jquery-2.1.3.min.js"></script>
      <!--Google Maps-->
      <script src="http://ditu.google.cn/maps/api/js"></script>
      <!--Bootstrap JS-->
      <script src="js/bootstrap.min.js"></script>
      
      <!--Owl Carousel-->
      <script src="vendors/owl.carousel/js/owl.carousel.min.js"></script>
      <!--Isotope-->
      <script src="vendors/isotope/isotope-custom.js"></script>
      <!--FlexSlider-->
      <script src="vendors/flexslider/jquery.flexslider-min.js"></script>
      <!--D-shine JS-->
      <script src="js/d-shine.js"></script>
      
      <script type="text/javascript">
   
    

</script> 
      
   <style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>

<script type="text/javascript">
$('.pinpai').click(function () {
    window.location.href="BrandStory.jsp"
})

$('.liwu').click(function () {
    window.location.href="liwu.jsp"
})

$('.duijie').click(function () {
    window.location.href="duijie.jsp"
})

$('.tiyan').click(function () {
    window.location.href="tiyan.jsp"
})
</script>


</html>